import React, { useState, forwardRef, useImperativeHandle } from 'react'
import '../../assets/css/menu.css'
import { Modal, Form, Input, Select, Radio, Switch, Button, message } from 'antd';
import { menuAdd, menuEdit, menuInfo } from '../../request/api';
const layout = {
    labelCol: {
        span: 5,
    },
    wrapperCol: {
        span: 16,
    },
};

const { Option } = Select;
const Dialog = forwardRef((props, ref) => {
    const { isShow, isAdd, cancel, menulist, getMenuList } = props

    const [form] = Form.useForm();


    const [value, setValue] = useState(1);
    const [editId, setEditId] = useState(0);


    function cancel1() {
        cancel(false)
        reset()
    }

    //暴露 ref 方法
    useImperativeHandle(ref, () => ({
        lookup,
    }));

    const lookup = (id) => {
        setEditId(id);
        //调取获取一条数据接口
        menuInfo({ id }).then((res) => {
            console.log(res, "llllllll");
            if (res.code == 200) {
                form.setFieldsValue(res.list);
            }
        });
    };


    const comfirm = () => {
        form.validateFields().then(val => {
            // console.log(val, 'valvalval');
            // console.log(form.validateFields(), '获取表单内容');
            if (isAdd) {
                menuAdd(val).then(res => {
                    console.log(res, '菜单添加');
                    if (res.code == 200) {
                        cancel1()
                        getMenuList()
                        message.success(res.msg);
                    } else {
                        message.error(res.msg);
                    }
                })
            } else {
                menuEdit({
                    ...val,
                    id: editId
                }).then(res => {
                    console.log(res, '菜单编辑');
                    if (res.code == 200) {
                        cancel1()
                        getMenuList()
                        message.success(res.msg);
                    } else {
                        message.error(res.msg);
                    }
                })
            }
        })
            .catch(err => {
                console.log(err);
            })
    }

    const changeSelect = (e) => {
        //重新设置value
        setValue(e == 0 ? 1 : 2);
        form.setFieldsValue({
            type: e == 0 ? 1 : 2
        })
    };

    let reset = () => {
        form.resetFields();
    }


    const onChange = (e) => {
        setValue(e.target.value);
    };

    return (
        <div>
            <>
                <Modal title={isAdd ? '添加菜单' : '编辑菜单'} visible={isShow} onCancel={() => cancel()} footer={null}>
                    <Form form={form} {...layout} >
                        <Form.Item
                            label="菜单名称"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入菜单名称!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="上级菜单"
                            name="pid"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Select
                                onChange={changeSelect}
                                placeholder="请选择上级菜单"
                                allowClear
                            >
                                <Option value={0}>顶级菜单</Option>
                                {menulist.map((item) => (
                                    <Option key={item.id} value={item.id}>
                                        {item.title}
                                    </Option>
                                ))}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="菜单类型"
                            name="type"
                            initialValue={value}
                        >
                            <Radio.Group onChange={onChange} value={value}>
                                <Radio value={1} disabled>目录</Radio>
                                <Radio value={2} disabled>菜单</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {value === 1 ? (
                            <Form.Item
                                label="菜单图标"
                                name="icon"
                            >
                                <Input />
                            </Form.Item>
                        ) : (
                            <Form.Item
                                label="菜单地址"
                                name="url"
                            >
                                <Input />
                            </Form.Item>
                        )}




                        <Form.Item
                            initialValue={1}
                            label="状态"
                            name="status"
                            valuePropName="checked"
                        >
                            <Switch />
                        </Form.Item>
                    </Form>
                    <div className="btnbox">
                        <Button onClick={() => cancel1()} style={{ margin: '0 10px' }}>取消</Button>
                        <Button type='primary' onClick={() => comfirm()}>确定</Button>
                    </div>
                </Modal>
            </>
        </div >
    )
})

export default Dialog;